<template>
	<view class="u-wrap">
		
			<top-bar fixed="relative"></top-bar>
		<view>
			<image v-if="shop.shopLogo" :src="shop.shopLogo" style="width: 100%;height: 400upx;"></image>
			<image v-else :src="noPic" style="width: 100%;height: 400upx;"></image>
		
			<view class="" style="position: absolute;left: 30upx; top: 320upx;color: #FFFFFF;font-size: 60upx;">
				{{shop.shopName}}
			</view>
		</view>
		<view class="u-menu-wrap">
			<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop">
				<view v-for="(category,index) in categoryList" :key="category.categoryId" class="u-tab-item"
					:class="[current==index ? 'u-tab-item-active' : '']" :data-current="index"
					@tap.stop="showCategory(index)">
					<text class="u-line-1">{{category.categoryName}}</text>
				</view>
			</scroll-view>
			<block v-for="(category,index) in categoryList" :key="category.id">
				<scroll-view  class="right-box" v-if="current==index" @scrolltolower="scrollLoadMoreData" scroll-y="true" >
					<view class="page-view">
						<view class="class-item">
							<view class="item-title">
								<text>{{category.categoryName}}</text>
							</view>
							<view class="item-container">
								<view class="thumb-box" v-for="(product, index1) in productdatas" :key="index1"
									@tap="toProduct(product)">
									<image class="item-menu-image c-radius" v-if="product.coverPhoto" :src="product.coverPhoto" mode=""></image>
									<image class="item-menu-image c-radius" v-else :src="noPic" mode=""></image>
									<view class="item-menu-name text-center margin-top-xs">{{product.prodName}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="load-text" style="text-align: center;">
							<text>{{loadText}}</text>
					</view>
				</scroll-view>
			</block>
		</view>
		<!--<view class="footer-fixed">
			<view class="footer-main">
				<navigator class="btn-gray" open-type="navigateBack">返回</navigator>
			</view>
		</view>-->
	</view>
</template>
<script>
	import topBar from "@/components/top-bar/top-bar.vue";
	import {
		getProduct,
		queryProductCategory
	} from '../../api/goods/goodsApi.js'
	import {
		getUserId,
		getUserName,
		saveUserVisit
	} from '../../api/user/userApi.js'
	import {
		getShops
	} from '../../api/shop/shopApi.js'
import conf from '@/conf/config.js';
	export default {
		components: {topBar},

		data() {
			return {
				loadText: '滚动加载更多...',
				next: true,
				curPage: 1,
				productdatas: [],
				shopId: '',
				scrollTop: 0, //tab标题的滚动条位置
				current: 0, // 预设当前项的值
				menuHeight: 0, // 左边菜单的高度
				menuItemHeight: 0, // 左边菜单item的高度
				//分类列表
				categoryList: [],
				categoryId:'',
				banner: '',
				shop: {},
				user_info: {},
				noPic:conf.commonBaseUrl+'h5/static/noPic.png'
			}
		},
	 async onLoad(options) {
		 await this.vc.onLoad(options).then(_suc=>{},_err=>{});
			this.shopId = options.shopId;
			this.initCateList();
			//this.getBannerList();
			this.load_shop();
			this._saveUserVisit();
		},
		methods: {
			//保存访问记录
			_saveUserVisit: function() {
				let _uname = "";
				let _uid = "";
				if (this.vc.hasLogin()) {
					_uname = getUserName();
					_uid = getUserId();
				} else {
					_uname = "匿名用户";
					_uid = "-1";
				}
				let data = {
					shopId: this.shopId,
					visitUserName: _uname,
					visitUserId: _uid
				};
				saveUserVisit(data).then()
			},
			load_shop: function() {
				var that = this;
				getShops({
						page: 1,
						row: 1,
						shopId: this.shopId
					})
					.then(_data => {
						that.shop = _data[0];
					})
			},
			initCateList: function() {
				let _that = this;
				let _data = {
					shopId: this.shopId,
					page: 1,
					row: 100
				}
				queryProductCategory(_data)
					.then(data => {
						_that.categoryList = data;
						if(!data || data.length < 1){
							_that.categoryList = [{
								categoryId:'-1',
								categoryName:'未设置目录'
							}]
							return;
						}
						_that.categoryId = data[0].categoryId;
						_that.scrollLoadMoreData();
					})

			},
			//分类切换显示
			async showCategory(index) {
				if (index == this.current) return;
				this.current = index;
				var list = this.categoryList;
				var cur_cate = {};
				for (var i in list) {
					var ite = list[i];
					if (i == index) {
						cur_cate = ite;
					}
				}
				this.categoryId = cur_cate.categoryId;
				this.next = true;
				this.curPage = 1;
				this.productdatas = [];
				this.scrollLoadMoreData();
				// 如果为0，意味着尚未初始化
				if (this.menuHeight == 0 || this.menuItemHeight == 0) {
					await this.getElRect('menu-scroll-view', 'menuHeight');
					await this.getElRect('u-tab-item', 'menuItemHeight');
				}
				// 将菜单菜单活动item垂直居中
				this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
			},
			// 获取一个目标元素的高度
			getElRect(elClass, dataVal) {
				new Promise((resolve, reject) => {
					const query = uni.createSelectorQuery().in(this)
					query.select('.' + elClass).fields({
						size: true
					}, res => {
						// 如果节点尚未生成，res值为null，循环调用执行
						if (!res) {
							setTimeout(() => {
								this.getElRect(elClass)
							}, 10)
							return
						}
						this[dataVal] = res.height
					}).exec()
				})
			},
			toProduct: function(e) {
				//uni.showToast({title: e.name,icon:"none"});
				this.vc.navigateTo({
					url: '/pages/goods/goods?productId=' + e.productId + "&shopId=" + e.shopId
				});
			},
			//搜索跳转
			tosearch: function(e) {
				uni.navigateTo({
					url: `/pages/goods/HM-search`
				})
			},
			async scrollLoadMoreData() {
				if(!this.next) {
					this.loadText = "已经到底了！"
					return
				}else{
					this.loadText = "滚动加载更多..."
				}
				uni.showLoading({
					mask: true,
					title: '加载中...'
				})
				// 数据加载具体实现方法
				await this.getGoodsProducts();
				uni.hideLoading()
			},
			// 商品详情
			getGoodsProducts: function() {
				let that = this;
				let _data = {
					page: that.curPage,
					row: 21,
					shopId: that.shopId,
					categoryId:that.categoryId
				}
				getProduct(_data)
					.then(_data => {
						let _product = _data.data;
						if(_product == null || _product.length < 21){
							this.loadText = "已经到底了！"
							that.next = false;
						}
						that.productdatas = that.productdatas.concat(_product);
						that.curPage ++;
					});
			},
		}
	}
</script>
<style lang="scss" scoped>
	.u-wrap {
		height: calc(100vh);
		display: flex;
		flex-direction: column;
	}

	.u-search-box {
		padding: 18rpx 30rpx;
	}

	.u-menu-wrap {
		flex: 1;
		display: flex;
		overflow: hidden;
	}

	.u-tab-view {
		width: 200rpx;
		height: 100%;
	}

	.u-tab-item {
		height: 110rpx;
		background: #f6f6f6;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		color: #444;
		font-weight: 400;
		line-height: 1;
	}

	.u-tab-item-active {
		position: relative;
		color: #000;
		font-size: 30rpx;
		font-weight: 600;
		background: #fff;
	}

	.u-tab-item-active::before {
		content: "";
		position: absolute;
		border-left: 4px solid $u-type-primary;
		height: 32rpx;
		left: 0;
		top: 39rpx;
	}

	.u-tab-view {
		height: 100%;
	}

	.right-box {
		background-color: rgb(250, 250, 250);
	}

	.page-view {
		padding: 16rpx;
	}

	.class-item {
		margin-bottom: 30rpx;
		background-color: #fff;
		padding: 16rpx;
		border-radius: 8rpx;
	}

	.item-title {
		font-size: 26rpx;
		color: $u-main-color;
		font-weight: bold;
	}

	.item-menu-name {
		font-weight: normal;
		font-size: 24rpx;
		color: $u-main-color;
		display: inline-block;
		white-space: nowrap;
		width: 90%;
		overflow: hidden;
		text-overflow:ellipsis;
	}

	.item-container {
		display: flex;
		flex-wrap: wrap;
	}

	.thumb-box {
		width: 33.333333%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-top: 20rpx;
	}

	.item-menu-image {
		width: 120rpx;
		height: 120rpx;
	}
</style>
